<template>
  <div class="regist">
    <el-col :span="6" :xs="18" class="registCoainter">
      <div class="title">
        Registration
        <div>
          we'll send a verification code to the email address you used to create the
          account.
        </div>
      </div>
      <el-form
        label-width="120px"
        label-position="top"
        :model="userRegistInfo"
        :rules="userInfoRules"
        ref="registForm"
      >
        <el-form-item label="Email" prop="Email">
          <el-input v-model="userRegistInfo.Email" />
        </el-form-item>
        <el-form-item label="Username" prop="Username">
          <el-input v-model="userRegistInfo.Username" />
        </el-form-item>

        <el-form-item label="Password" prop="Password">
          <el-input show-password v-model="userRegistInfo.Password" />
          <ul>
            <li>At least 8 characters long.</li>
            <li>
              A combination of uppercase letters, lowercase letters, numbers, and symbols.
            </li>
          </ul>
        </el-form-item>
        <el-form-item label="Confirm Password" prop="ConfirmPassword">
          <el-input show-password v-model="userRegistInfo.ConfirmPassword" />
        </el-form-item>
      </el-form>

      <el-button :color="isdisabled ? '#6B6B6B' : '#00aa8b'" :disabled="isdisabled"
        >Submit</el-button
      >
    </el-col>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { Passwordfuc, confirmPwdfuc } from '@/utils/rules.ts';
const isdisabled = ref(true);
const registForm = ref(null);
const userRegistInfo = reactive({
  Email: '',
  Username: '',
  Password: '',
  ConfirmPassword: '',
});

const userInfoRules = reactive({
  Email: [
    {
      required: true,
      message: 'Please input Email',
      trigger: 'blur',
    },
    {
      type: 'email',
      message: 'Please input correct email format',
      trigger: ['blur', 'change'],
    },
  ],
  Username: [
    {
      required: true,
      message: 'Please input Username',
      trigger: 'blur',
    },
  ],
  Password: [
    {
      required: true,
      min: 6,
      max: 8,
      message: 'Password should be 6 to 8',
      trigger: 'blur',
    },
    { validator: Passwordfuc(userRegistInfo.Password, registForm), trigger: 'blur' },
  ],
  ConfirmPassword: [
    {
      required: true,
      validator: confirmPwdfuc(userRegistInfo.Password),
      trigger: 'blur',
    },
  ],
});
</script>
<style scoped lang="less">
.regist {
  overflow: hidden;
  .registCoainter {
    margin: 60.25px auto 0;
    .title {
      font-family: "Neue Machina";
      margin-bottom: 25px;
      font-size: 28px;
      color: #cdcdcd;
      div {
        font-size: 15px;
        margin: 16px 0 25px;
      }
    }
    /deep/ .el-form {
      .el-form-item__label {
        color: white;
      }
      .el-input {
        height: 44px;
        svg,
        .el-input__icon {
          width: 20px;
          height: 20px;
        }
      }
      ul {
        color: white;
        margin-top: 4px;
        font-size: 11px;
        li {
          margin-left: 18px;
        }
        &:last-child {
          height: 50px;
          line-height: 50px;
          margin-top: 4px;
        }
      }
    }
    .el-button {
      width: 100%;
      height: 44px;
    }
  }
  @media screen and(max-width:768px) {
    .registCoainter {
      margin-top: 15px;
    }
  }
}
</style>
